<template>
  <view class="header">
    <view id="logo" @tap="HomePageJump" v-show="isShow">
      <image
        src="https://m.k12zx.com/statics/index/img/logo.png"
        alt="#"
        class="top-img"
      ></image>
    </view>
    <view class="city" v-show="isShow" @tap="choose">
      <text class="cityTitle">全国</text>
    </view>
    <view :catchtouchmove="preventTouchMove">
      <!-- 遮罩 -->
      <view class="b1" @tap="close" v-if="show"></view>
      <view class="desk" v-if="show" catchtouchmove="preventTouchMove">
        <view class="hotCitys">
          <view class="hotCitys-title">热门城市</view>
          <view class="hotCitys-n">
            <view
            @tap='cityClick'
              class="hotCitys-text"
              v-for="item in hotList"
              :key="item.id"
              >{{ item.title }}</view
            >
          </view>
        </view>
        <view class="citys" :catchtouchmove="preventTouchMove">
          <view class="citys-n">
            <view class="n-title">A</view>
            <view class="n-city">检验</view>
          </view>
        </view>
      </view>
    </view>
    <view class="search-input" v-show="!isShow">
      <input type="text" class="InputBox" placeholder="搜索 课程/学校" />
      <text class="Cancel" @tap="isShow = true">取消</text>
    </view>
    <view class="Search" @tap="Search" v-show="isShow">
      <image src="../../icon/搜索.png" alt="搜索"></image>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  props:[
    
  ],
  data() {
    return {
      show: false,
      show2: false,
      isShow: true,
      hotList: [
        {
          id: 0,
          title:"北京",
        },
        {
          id: 1,
          title:"上海",
        },
        {
          id: 2,
          title:"广州",
        },
        {
          id: 3,
          title:"深圳",
        },
        {
          id: 4,
          title:"成都",
        },
        {
          id: 5,
          title:"杭州",
        },
        {
          id: 6,
          title:"浙江",
        },
        {
          id: 7,
          title:"南京",
        },
        {
          id: 8,
          title:" 江苏",
        },    
      ],
    };
  },
  methods:{
       HomePageJump() {
      Taro.redirectTo({
        url: "/pages/index/index",
      });
    },
    cityClick(){
      Taro.navigateTo({
        url: "/pages/citySchools/index",
      })
    },
    Search() {
      this.isShow = false;
    },
    choose: function () {
      this.show = true;
    },
    close: function () {
      this.show = false;
    },
    preventTouchMove: function closeBodyScroll() {
      window.lockMaskScrollTop =
        document.scrollingElement.scrollTop || document.body.scrollTop;
      document.body.classList.add("popup-open");
      document.body.style.top = -window.lockMaskScrollTop + "px";
    },
    preventTouchMove: function openBodyScroll() {
      if (document.body.classList.contains("popup-open")) {
        document.body.classList.remove("popup-open");
        document.scrollingElement.scrollTop = window.lockMaskScrollTop;
      }
    },
  }
};
</script>

<style >
.header {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: white;
}

#logo {
  width: 40%;
  height: 50px;
  margin-left: 30px;
  /* background-color: aquamarine; */
}

.city {
  width: 50px;
  display: flex;
  margin-left: 50px;
  font-size: 25px;
  color: #000;
}
.hotCitys {
  width: 100%;
  box-shadow: 2px 2px 6px #ccc;
}
.hotCitys-title {
  padding-top: 3%;
  text-align: center;
}
.hotCitys-text {
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
}
.hotCitys-n {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4%;
}
.citys {
  width: 100%;
  height: 80%;
}
.n-title {
  width: 8%;
  height: 80%;
  margin-left: 10px;
  text-align: center;
  line-height: 70px;
  background-color: bisque;
}
.n-city {
  padding-left: 25px;
}
.citys-n {
  width: (100% + 6px);
  height: 10%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.Search {
  width: 8%;
  height: 70%;
  margin-left: auto;
  margin-right: 5%;
  /* background-color: brown; */
}

.Search image {
  width: 100%;
  height: 100%;
}
.search-input {
  display: flex;
  width: 100%;
  height: 80px;
  background-color: #0b6db6;
  /* box-shadow:5px 5px 6px #000; */
}
.InputBox {
  width: 80%;
  height: 74px;
  margin-top: 3px;
  margin-left: 3px;
  padding-left: 10px;
  border: 1px solid #ccc;
  background-color: white;
}
.Cancel {
  font-size: 30px;
  color: white;
  line-height: 80px;
  margin-left: auto;
  margin-right: 5%;
}
#logo image {
  width: 100%;
  height: 100%;
}
</style>
